<script setup>
import {
  QuestionFilled
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

</script>

<template>
  <mt-create-form>
    <el-card style="max-width: 480px">
      <template #header>
        <div>
          <span><strong>事件目的地</strong></span>
        </div>
      </template>
      <p @click="router.push('/events/create/mysql')" class="event-dest-item">
        <el-icon size="50" style="margin-right: 10%">
          <svg t="1733218364855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4299" width="200" height="200"><path d="M1001.632 793.792c-7.84-13.856-26.016-37.536-93.12-83.2a1096.224 1096.224 0 0 0-125.152-74.144c-30.592-82.784-89.824-190.112-176.256-319.36-93.056-139.168-201.12-197.792-321.888-174.56a756.608 756.608 0 0 0-40.928-37.696C213.824 78.688 139.2 56.48 96.32 60.736c-19.424 1.952-34.016 9.056-43.36 21.088-21.664 27.904-14.432 68.064 85.504 198.912 19.008 55.616 23.072 84.672 23.072 99.296 0 30.912 15.968 66.368 49.984 110.752l-32 109.504c-28.544 97.792 23.328 224.288 71.616 268.384 25.76 23.552 47.456 20.032 58.176 15.84 21.504-8.448 38.848-29.472 50.048-89.504 5.728 14.112 11.808 29.312 18.208 45.6 34.56 87.744 68.352 136.288 106.336 152.736a32.032 32.032 0 0 0 25.44-58.688c-9.408-4.096-35.328-23.712-72.288-117.504-31.168-79.136-53.856-132.064-69.376-161.856a32.224 32.224 0 0 0-35.328-16.48 32.032 32.032 0 0 0-25.024 29.92c-3.872 91.04-13.056 130.4-19.2 147.008-26.496-30.464-68.128-125.984-47.232-197.536 20.768-71.232 32.992-112.928 36.64-125.248a31.936 31.936 0 0 0-5.888-29.28c-41.664-51.168-46.176-75.584-46.176-83.712 0-29.472-9.248-70.4-28.288-125.152a31.104 31.104 0 0 0-4.768-8.896c-53.824-70.112-73.6-105.216-80.832-121.888 25.632 1.216 74.336 15.04 91.008 29.376a660.8 660.8 0 0 1 49.024 46.304c8 8.448 19.968 11.872 31.232 8.928 100.192-25.92 188.928 21.152 271.072 144 87.808 131.328 146.144 238.048 173.408 317.216a32 32 0 0 0 16.384 18.432 1004.544 1004.544 0 0 1 128.8 75.264c7.392 5.024 14.048 9.696 20.064 14.016h-98.848a32.032 32.032 0 0 0-24.352 52.736 3098.752 3098.752 0 0 0 97.856 110.464 32 32 0 1 0 46.56-43.872 2237.6 2237.6 0 0 1-50.08-55.328h110.08a32.032 32.032 0 0 0 27.84-47.776z" p-id="4300"></path><path d="M320 289.472c12.672 21.76 22.464 37.344 29.344 46.784 8.288 16.256 21.184 29.248 29.44 45.536l2.016-1.984c14.528-9.952 25.92-49.504 2.752-75.488-12.032-18.176-51.04-17.664-63.552-14.848z" p-id="4301"></path></svg>
        </el-icon>
        MySQL
      </p>
      <p @click="router.push('/events/create/redis')" class="event-dest-item">
        <el-icon size="50" style="margin-right: 10%">
          <svg t="1733218656094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5386" width="200" height="200"><path d="M940.8 728.32c-49.493333 26.026667-307.2 131.84-361.813333 160.426667s-85.333333 28.16-128.426667 7.68-317.013333-131.413333-366.506667-154.88c-24.746667-11.946667-37.546667-21.76-37.546666-31.146667v-94.293333s356.693333-77.653333 414.293333-98.133334 77.653333-21.333333 126.72-3.413333 341.76 70.826667 390.4 88.32V695.466667c0 8.533333-11.52 19.626667-37.12 32.853333z" fill="#A42122" p-id="5387"></path><path d="M940.8 634.026667c-49.493333 26.026667-307.2 131.84-361.813333 160.426666s-85.333333 28.16-128.426667 7.68-317.013333-131.413333-366.506667-154.88-50.346667-39.68-1.706666-58.88 320.853333-125.866667 378.453333-146.346666 77.653333-21.333333 126.72-3.413334 304.64 119.893333 353.28 137.386667 49.92 32.426667 0 58.026667z" fill="#D82F27" p-id="5388"></path><path d="M940.8 574.72c-49.493333 26.026667-307.2 131.84-361.813333 160.426667s-85.333333 28.16-128.426667 7.68-317.013333-131.413333-366.506667-154.88c-24.746667-11.946667-37.546667-21.76-37.546666-31.146667v-94.293333s356.693333-77.653333 414.293333-98.133334 77.653333-21.333333 126.72-3.413333 341.76 70.826667 390.4 88.32V541.866667c0 8.533333-11.52 19.626667-37.12 32.853333z" fill="#A42122" p-id="5389"></path><path d="M940.8 480.853333c-49.493333 26.026667-307.2 131.84-361.813333 160.426667s-85.333333 28.16-128.426667 7.68-317.013333-131.413333-366.506667-154.88-50.346667-39.68-1.706666-58.88S403.2 308.906667 460.8 288.426667s77.653333-21.333333 126.72-3.413334 304.64 119.893333 352.853333 137.386667 50.346667 32.426667 0.426667 58.453333z" fill="#D82F27" p-id="5390"></path><path d="M940.8 415.573333c-49.493333 26.026667-307.2 131.84-361.813333 160.426667s-85.333333 28.16-128.426667 7.68-317.013333-131.413333-366.506667-154.88c-24.746667-11.946667-37.546667-21.76-37.546666-31.146667V303.36s356.693333-77.653333 414.293333-98.133333 77.653333-21.333333 126.72-3.413334 341.333333 70.826667 389.973333 88.32v92.586667c0 8.533333-11.093333 19.626667-36.693333 32.853333z" fill="#A42122" p-id="5391"></path><path d="M940.8 321.706667c-49.493333 26.026667-307.2 131.84-361.813333 160.426666s-85.333333 28.16-128.426667 7.68-317.013333-131.84-366.506667-155.306666-50.346667-39.68-1.706666-58.88S403.2 149.76 460.8 129.28s77.653333-21.333333 126.72-3.413333 304.64 119.893333 353.28 137.386666 49.92 32.426667 0 58.453334z" fill="#D82F27" p-id="5392"></path><path d="M634.026667 230.826667l-80.64 8.533333-17.92 43.52-29.44-48.64L413.013333 226.133333l69.546667-25.173333-20.906667-38.4 64.853334 25.173333 61.44-20.053333-16.64 39.68 62.72 23.466667zM530.346667 441.6L379.733333 379.306667l215.893334-33.28-65.28 95.573333z" fill="#FFFFFF" p-id="5393"></path><path d="M206.506667 299.946667a115.2 44.8 0 1 0 230.4 0 115.2 44.8 0 1 0-230.4 0Z" fill="#FFFFFF" p-id="5394"></path><path d="M729.173333 242.773333l128 50.346667L729.6 343.893333l-0.426667-101.12z" fill="#791514" p-id="5395"></path><path d="M587.946667 298.666667l141.226666-55.893334 0.426667 101.12-14.08 5.12L587.946667 298.666667z" fill="#AD2524" p-id="5396"></path></svg>
        </el-icon>
        Redis
      </p>
      <p @click="router.push('/events/create/webhook')" class="event-dest-item">
        <el-icon size="50" style="margin-right: 10%">
          <svg t="1733219920361" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5104" width="200" height="200"><path d="M537.6 379.392h-2.368a89.6 89.6 0 1 1 78.784-46.912l82.944 138.304c12.544-2.24 25.6-3.584 39.04-3.584 123.648 0 224 100.352 224 224a224.128 224.128 0 0 1-363.392 175.232l65.024-63.168c21.504 14.336 47.04 22.4 74.368 22.4a134.784 134.784 0 0 0 134.4-134.4 134.784 134.784 0 0 0-134.4-134.4V556.8a134.4 134.4 0 0 0-77.12 24.192L537.6 379.392z m259.712 377.408a89.6 89.6 0 0 1-142.208-20.736H507.52A224 224 0 1 1 243.136 471.68v92.8a135.04 135.04 0 0 0-89.6 126.72 134.784 134.784 0 0 0 134.4 134.4A134.784 134.784 0 0 0 422.4 691.2v-44.8h235.328a89.728 89.728 0 0 1 139.584-16.32 89.6 89.6 0 0 1 0 126.72z" fill="#4C4C4C" p-id="5105"></path><path d="M629.248 193.088A134.848 134.848 0 0 0 534.4 153.6a134.848 134.848 0 0 0-134.4 134.4 134.528 134.528 0 0 0 103.552 130.816l-137.6 229.184a89.6 89.6 0 1 1-78.72-44.16l92.608-153.664A224.128 224.128 0 0 1 534.336 64c123.648 0 224 100.352 224 224h-89.6a134.784 134.784 0 0 0-39.488-94.912z" fill="#C63B66" p-id="5106"></path></svg>
        </el-icon>
        WebHook
      </p>
    </el-card>

    <template #tip>
      <p style="display: flex; align-items: center;">
        <el-icon size="30"><QuestionFilled /></el-icon><span style="margin-left: 5px; font-weight: bold;">什么是事件？</span>
      </p>
      MT 存储桶通知允许管理员针对某些对象或存储桶事件向支持的外部服务发送通知。
    </template>
  </mt-create-form> 
</template>

<style lang="scss" scoped>
.event-dest-item {
  display: flex;
  align-items: center;
  background-color: whitesmoke;
  font-weight: bold;
  padding: 5%;
  cursor: pointer;

  &:hover {
    background-color: rgba(0, 0, 0, 0.232);
  }
}
</style>